<template>
  <!-- 问题卡片组件 -->
  <div class="question-card">
      <!-- 问题卡片头部，包含题型和难度徽章 -->
      <div class="question-card-header">
          <!-- 显示题型 -->
          <span class="question-card-type">{{ questionType }}</span>
          <!-- 显示难度徽章，根据难度设置背景颜色 -->
          <span class="difficulty-badge" :style="{ backgroundColor: difficultyColor }">
              {{ question.difficulty || '未设置' }}
          </span>
      </div>
      <!-- 显示问题内容 -->
      <div class="question-card-content">{{ question.content }}</div>

      <!-- 如果问题有选项，显示选项列表 -->
      <div class="question-card-options" v-if="question.options">
          <!-- 遍历格式化后的选项 -->
          <!-- 如果该选项是正确答案，添加 correct-answer 类 -->
          <div 
              v-for="(option, index) in formattedOptions" 
              :key="index" 
               class="question-card-option"             
              :class="{ 'correct-answer': isCorrectAnswer(option) }" 
          >
              {{ option }}
              <!-- 如果该选项是正确答案，显示正确答案标签 -->
              <span class="correct-answer-label" v-if="isCorrectAnswer(option)">正确答案</span>
          </div>
      </div>

      <!-- 如果问题有解析，显示解析内容 -->
      <div class="question-parse" v-if="question.parse">{{ question.parse }}</div>

      <!-- 问题卡片底部，包含创建时间和编辑按钮 -->
      <div class="question-card-footer">
          <!-- 显示问题创建时间 -->
          <div>创建于: {{ formatDateTime(new Date(question.created_at)) }}</div>
          <div>
              <!-- 编辑按钮，点击触发 editQuestion 方法 -->
              <button class="btn btn-outline" @click="editQuestion">编辑</button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'QuestionCard',
  // 组件接收的属性，这里接收一个 question 对象，为必需项
  props: {
      question: {
          type: Object,
          required: true
      }
  },
  computed: {
      // 根据问题的 type 属性计算题型
      questionType() {
          const types = {
              0: '单选题',
              1: '多选题',
              2: '填空题',
              3: '判断题',
              4: '简答题'
          };
          return types[this.question.type] || '未知题型';
      },
      // 根据问题的 difficulty 属性计算难度对应的颜色
      difficultyColor() {
          const colors = {
              '简单': '#10b981',
              '中等': '#f59e0b',
              '困难': '#ef4444',
              '未设置': '#94a3b8'
          };
          return colors[this.question.difficulty || '未设置'];
      },
      // 格式化问题的选项，将字符串按换行符分割成数组
      formattedOptions() {
          if (!this.question.options) return [];
          return this.question.options.split('\n');
      }
  },
  methods: {
      // 格式化日期时间，将 Date 对象格式化为 '年-月-日 时:分' 的形式
      formatDateTime(date) {
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const day = date.getDate().toString().padStart(2, '0');
          const hours = date.getHours().toString().padStart(2, '0');
          const minutes = date.getMinutes().toString().padStart(2, '0');
          return `${year}-${month}-${day} ${hours}:${minutes}`;
      },
      // 判断选项是否为正确答案
      isCorrectAnswer(option) {
          if (!this.question.correct_answer) return false;

          // 检查选项是否以正确答案开头（支持A、A.、A:等形式）
          return option.startsWith(this.question.correct_answer + '.') ||
                 option.startsWith(this.question.correct_answer + '、') ||
                 option.startsWith(this.question.correct_answer + ':');
      },
      // 编辑问题的方法，触发父组件的 edit 事件，并传递当前问题对象
      // 这里是父子组件通信的关键部分，子组件通过 $emit 触发自定义事件，将数据传递给父组件
      editQuestion() {
          this.$emit('edit', this.question);
      }
  }
}
</script>

<style lang="less" scoped>
// 定义变量
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@primary: #3490dc;
@primary-light: #6cb2eb;
@gray-light: #e2e8f0;
@gray-light-2: #edf2f7;
@success: #38c172;
@gray-dark: #4a5568;
@gray: #718096;
@dark: #2d3748;
// 问题卡片样式
.question-card {

  // 背景颜色
  background-color: white;
  // 圆角
  border-radius: 0.75rem;
  // 内边距
  padding: 1.5rem;
  // 底部外边距
  margin-bottom: 1.25rem;

  // 阴影效果
  box-shadow: @shadow-sm;
  // 边框样式
  border: 1px solid @gray-light;

  // 问题卡片头部样式
  .question-card-header {
    // 使用 flex 布局
    display: flex;
    // 子元素两端对齐
    justify-content: space-between;
    // 子元素垂直居中
    align-items: center;
    // 底部外边距
    margin-bottom: 1rem;

    // 题型样式
    .question-card-type {
      // 字体大小
      font-size: 0.8125rem;
      // 字体粗细
      font-weight: 600;
      // 字体颜色
      color: @primary;
      // 背景颜色
      background-color: @primary-light;
      // 内边距
      padding: 0.375rem 0.75rem;
      // 圆角
      border-radius: 9999px;
    }

    // 难度徽章样式
    .difficulty-badge {
      // 字体大小
      font-size: 0.8125rem;
      // 字体粗细
      font-weight: 600;
      // 字体颜色
      color: white;
      // 内边距
      padding: 0.375rem 0.75rem;
      // 圆角
      border-radius: 9999px;
    }
  }

  // 问题内容样式
  .question-card-content {
    // 字体大小
    font-size: 0.9375rem;
    // 行高
    line-height: 1.6;
    // 底部外边距
    margin-bottom: 1rem;
  }

  // 问题选项列表样式
  .question-card-options {
    // 上下外边距
    margin: 1.25rem 0;
    // 使用 flex 布局，垂直排列
    display: flex;
    flex-direction: column;
    // 子元素间距
    gap: 0.75rem;

    // 单个问题选项样式
    .question-card-option {
      // 内边距
      padding: 0.75rem 1rem;
      // 圆角
      border-radius: 0.5rem;
      // 背景颜色
      background-color: @gray-light-2;
      // 相对定位
      position: relative;
      // 过渡效果
      transition: all 0.2s;

      // 正确答案标签样式
      .correct-answer-label {
        // 绝对定位
        position: absolute;
        // 右侧外边距
        right: 1rem;
        // 垂直居中
        top: 50%;
        transform: translateY(-50%);
        // 字体大小
        font-size: 0.6875rem;
        // 字体粗细
        font-weight: 600;
        // 字体颜色
        color: @success;
        // 背景颜色
        background-color: white;
        // 内边距
        padding: 0.25rem 0.5rem;
        // 圆角
        border-radius: 9999px;
      }
    }

    // 正确答案选项样式
    .correct-answer {
      // 背景颜色
      background-color: rgba(16, 185, 129, 0.1);
      // 左边框样式
      border-left: 3px solid @success;
    }
  }

  // 问题解析样式
  .question-parse {
    // 顶部外边距
    margin-top: 1.25rem;
    // 内边距
    padding: 1rem;
    // 背景颜色
    background-color: @gray-light-2;
    // 圆角
    border-radius: 0.5rem;
    // 字体大小
    font-size: 0.875rem;
    // 字体颜色
    color: @gray-dark;
    // 左边框样式
    border-left: 3px solid @gray;
  }

  // 问题卡片底部样式
  .question-card-footer {
    // 使用 flex 布局
    display: flex;
    // 子元素两端对齐
    justify-content: space-between;
    // 子元素垂直居中
    align-items: center;
    // 顶部外边距
    margin-top: 1.5rem;
    // 顶部内边距
    padding-top: 1.25rem;
    // 顶部边框样式
    border-top: 1px solid @gray-light;
    // 字体大小
    font-size: 0.8125rem;

    // 按钮通用样式
    .btn {
      // 内边距
      padding: 0.25rem 0.5rem;
      // 字体大小
      font-size: 0.75rem;
      // 圆角
      border-radius: 0.5rem;
      // 字体粗细
      font-weight: 500;
      // 鼠标指针样式
      cursor: pointer;
      // 过渡效果
      transition: all 0.2s;
      // 无边框
      border: none;
      // 使用 flex 布局
      display: flex;
      // 子元素垂直居中
      align-items: center;
      // 子元素间距
      gap: 0.5rem;
      // 行高
      line-height: 1;

      // 轮廓按钮样式
      &.btn-outline {
        // 背景颜色透明
        background-color: transparent;
        // 边框样式
        border: 1px solid @gray-light;
        // 字体颜色
        color: @dark;

        // 轮廓按钮鼠标悬停样式
        &:hover {
          // 背景颜色
          background-color: @gray-light-2;
          // 边框颜色
          border-color: @gray;
        }
      }
    }
  }
}
</style>    